.head {
  display: flex;
  margin-top: 50px;

  @media (max-width: 768px) {
    flex-direction: column;
    margin-bottom: 25px;
    text-align: center;
  }

  h1 {
    flex: 1;
  }
}

nav {
  flex: 1;
  max-width: 400px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;

  a, a:link {
    color: #808080;

    &:hover {
      color: var(--color-orange);
      text-decoration: none;
    }

    &.active, &.active:hover {
      color: #FFFFFF;
      text-decoration: none;
    }

  }
}

h1 {
  font-size: 32px;
  margin: 0;
  margin-bottom: 15px;
  font-weight: 400;
}

.package {
  color: #F9EDDF;
  font-size: 15px;
}

.faqs {
  margin: 55px 0;
}

.faq {
  margin: auto;
  margin-bottom: 35px;
  max-width: 750px;

  .question {
    border-radius: 3px;
    border: 1px solid #343434;
    background: #222;
    padding: 17px 20px;
    color: white;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .answer {
    padding: 1em 20px;
    border: 1px solid #343434;
    border-top: 0;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: #252525;

    app-render-content {
      display: block;
      max-width: 820px;
    }
  }
}
